<template>
  <div style="width: 100%; height: 100%" class="test">
  <dv-page target="parent" fit>
    <dv-box style="border:1px solid red" layout :gap="20" left="20px" top="20px" height="calc(100% - 40px)" width="50%">
      <dv-box class="inner" width="100%" :weight="1">
        <template v-slot:title>
          <div >title</div> 
        </template>  
        
        <div class="dv-number">123456</div>
        
        <template v-slot:footer>
          <div >footer</div> 
        </template>  
      </dv-box>
      <dv-box class="inner" width="100%" :weight="2">
        <dv-chart-pictorial :data="barData" fit  :settings="settings" />
      </dv-box> 
        
      <dv-box class="inner" width="100%" :weight="1">
        CC<button @click="test">test</button>
      </dv-box> 
      <dv-box class="inner" width="100%" :weight="1" v-if="z">ee</dv-box>
    </dv-box>
  </dv-page>

  <!-- <button @click="test">test / {{zIndex}}</button> -->
  </div> 
    
</template>
<script setup lang="ts" >
  import { ref } from 'vue';
  import {DvBox, DvPage, DvChartPictorial} from '$comp/index';
const plain ='path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z'
  
const z = ref(true)
const test = () => {
  z.value = !z.value;
}

const barData = ref({
  columns: ['渠道', '访问量'],
  rows: [
      ['直接访问', 320],
      ['邮件营销', 302],
      ['联盟广告', 334],
      ['视频广告', 390],
      ['搜索引擎', 330]
  ]
})

const settings = ref({
  gradient: true,
})
</script>
<style lang="scss" scoped>

.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
   background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
  //  text-align: center;
  }
 }
</style>
